<style type="text/css">
  footer { display: none; }
  html,body { margin: 0; height: 100%; }
</style>
<div class="house-type-info">
  <div id="house-type-img" class="house-type-img loading">
    <img data-src="{$houseType.pic}" alt="户型图" />
  </div>
  <div class="info" id="info">
    <h5 class="tc">{$houseType.name}</h5>
    <a href="javascript:void(0)"> <strong>{$houseType.name}</strong>{$houseType.description}
      <span>详情</span>
      <hr />
      <div class="content">{$houseType.content}</div>
    </a>
  </div>
</div>
<script type="text/javascript">
  (function() {
    var info = document.getElementById("info");
    info.onclick = function() {
      var className = this.getAttribute("class") || "", reg = new RegExp(/(^| )show-all( |$)/);
      if (reg.test(className)) {
        this.className = className.replace(reg, "");
      } else {
        this.className = className + " show-all";
      }
    };
  })()

  function resetImage(img, imgInfo) {
    var w = document.documentElement.clientWidth, h = document.documentElement.clientHeight;
    if (w > h) {
      img.style.height = h + "px";
      img.style.width = "auto";
      img.style.marginTop = "0";
    } else {
      var marginTop = (h - imgInfo.imgHeight * w / imgInfo.imgWidth) / 2;
      img.style.width = w + "px";
      img.style.height = "auto";
      img.style.marginTop = marginTop + "px";
    }
  }

  function getImgInfo(src, callback) {

    var objImg = new Image();
    objImg.src = src;

    var imgInfo = {};
    if (objImg.complete) {
      imgInfo.imgWidth = objImg.width;
      imgInfo.imgHeight = objImg.height;
      callback && callback(imgInfo);
    } else {
      objImg.onload = function() {
        imgInfo.imgWidth = objImg.width;
        imgInfo.imgHeight = objImg.height;
        callback && callback(imgInfo);
      }
    }
    return imgInfo;
  }

  var img = document.getElementById("house-type-img").children[0],
      imgSrc = img.getAttribute("data-src"), imgInfo = getImgInfo(imgSrc);
  getImgInfo(imgSrc, function(imgInfo) {
    img.src = imgSrc;
    resetImage(img, imgInfo);
  });
  window.addEventListener("resize", function() {
    resetImage(img, imgInfo);
  }, false);
</script>